<template>
  <div>
    <!-- 头部选中地址 -->
    <view class="cart-top" @tap="chooseAddress">
      <block v-if="address.userName">
        <view class="user">
          <view>收件人：{{address.userName}}</view>
          <view>{{address.telNumber}}</view>
        </view>
        <view class="address">
          收件地址：{{ address.addr }}
        </view>
      </block>
      <block v-else>
        <view class="add-addresss">新增收货地址 +</view>
      </block>
      <view class="address-border"></view>
    </view>

    <!-- 购物车商品列表 -->
    <div class="list-title">
      优购生活馆
    </div>
    <div class="ware-list">
      <block v-for="(item,index) in cartList" :key="index">
        <div class="ware-item" @tap="goToDetail(index)">
          <!-- 选择按钮 -->
          <div class="choice-button" @tap.stop="choiceGoods(index)">
            <view class="iconfont icon-xuanze4" :class="{'icon-xuanze2' : item.selected}"></view>
          </div>
          <!-- 内容主体 -->
          <div class="ware-content">
            <!-- 主体左图片 -->
            <div class="ware-image">
               <img :src="item.goods_small_logo" alt="" />
            </div>
            <!-- 主体右信息 -->
            <div class="ware-info">
              <view>{{item.goods_name}}</view>
              <div class="ware-info-btn">
                <!-- 价格 -->
                <div class="ware-price">￥{{item.goods_price}}</div>
                <!-- 计数器 -->
                <div class="calculate">
                  <div class="rect" @tap.stop="calculateHandle(index,-1)">-</div>
                  <div class="number">{{item.count}}</div>
                  <div class="rect" @tap.stop="calculateHandle(index,1)">+</div>
              </div>
            </div>
          </div>
        </div>
        </div>
      </block>
    </div>

    <!-- 底部结算 -->
    <div class="cart-total">
      <div class="total-button" @tap="choiceAll(allCount == cartLength)">
        <view class="iconfont icon-xuanze4" :class="{'icon-xuanze2' : allCount == cartLength}">全选</view>
      </div>
      <div class="total-center">
        <div class="colorRed">￥{{allPrice}}</div>
        <div class="price-tips">
          免费配送-包邮
        </div>
      </div>
      <div class="accounts" @tap="accountsHandle">
        结算{{allCount}}
      </div>
    </div>
  </div>
</template>

<script>
export default{
  data(){
    return {
      address:{
        userName:"",
        telNumber:"",
        addr:""
      },
      cartList:{},
      allCount:0,
      cartLength:0
    }
  },
  computed: {
    allPrice(){
      let allPrice = 0;
      let allCount = 0;
      let cartList = this.cartList;
      for (let key in cartList) {
        if (cartList[key].selected) {
          allPrice += cartList[key].count * cartList[key].goods_price;
          allCount++;
        }
      }
      this.cartLength = Object.keys(this.cartList).length;
      this.allCount = allCount;
      return allPrice;
    }
  },
  onLoad(){
    this.address = wx.getStorageSync('address') || {};
  }, 
  onShow(){
    this.cartList = wx.getStorageSync('cartList') || {};
  },
  methods: {
    // 选择收货地址
    chooseAddress(){
      wx.chooseAddress({
        success:(res)=> {
          this.address = {
            userName:res.userName,
            telNumber:res.telNumber,
            addr:`${res.provinceName}${res.cityName}${res.countyName}${res.detailInfo}`
          }
          wx.setStorageSync('address',this.address);
        }
      })
    },
    // 点击商品实现跳转
    goToDetail(index){
      wx.navigateTo({ url: '/pages/goods_detail/main?goods_id='+index });
    },
    // 商品选中按钮
    choiceGoods(index){
      this.cartList[index].selected = !this.cartList[index].selected;
    },
    // 点击加减修改个数
    calculateHandle(index,number){
      // console.log("点击加减"+type);
      this.cartList[index].count += number;
      if (this.cartList[index].count < 1) {
        wx.showModal({
          title: '提示', //提示的标题,
          content: 'content', //提示的内容,
          showCancel: true, //是否显示取消按钮,
          cancelText: '取消', //取消按钮的文字，默认为取消，最多 4 个字符,
          cancelColor: '#000000', //取消按钮的文字颜色,
          confirmText: '确定', //确定按钮的文字，默认为取消，最多 4 个字符,
          confirmColor: '#3CC51F', //确定按钮的文字颜色,
          success: res => {
            if (res.confirm) {
              // console.log('用户点击确定')
              delete this.cartList[index];
              this.cartList = JSON.parse(JSON.stringify(this.cartList));
            } else if (res.cancel) {
              // console.log('用户点击取消')
              this.cartList[index].count = 1
            }
          }
        });
      }
    },
    // 全选
    choiceAll(b1){
      for (let key in this.cartList) {
        // const element = array[index];
        this.cartList[key].selected = !b1;
      }
    },
    // 结算按钮
    accountsHandle(){
        // 如果本地没有 token ，那就跳转到授权页面，发起请求换取 token
      if(!wx.getStorageSync('token')){
        // 跳转到授权页面
        wx.navigateTo({ url: '/pages/auth/main' });
      }else{
        wx.navigateTo({ url: '/pages/mmy/main' });
      }
    }
  }
}
</script>
<style lang="scss">
.cart-top {
  min-height: 180rpx;
  position: relative;
  .user {
    display: flex;
    padding: 20rpx;
    justify-content: space-between;
    position: relative;
    padding-right: 50rpx;

    &:after {
      display: block;
      content: "";
      width: 12px;
      height: 12px;
      border-top: 1px #999 solid;
      border-right: 1px #999 solid;
      transform: rotate(45deg);
      position: absolute;
      right: 20rpx;
      top: 20rpx;
      margin-top: 6px;
    }
  }

  .address {
    padding: 20rpx;
    padding-top: 0;
  }

  .address-border {
    width: 100%;
    height: 8px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
  }

  .add-addresss {
    height: 180rpx;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.list-title {
  padding: 20rpx;
  border-bottom: 1px #eee solid;
  border-top: 10px #eee solid;
}

.ware-list {
  padding-bottom: 100rpx;
}

.icon-xuanze-fill {
  color: #ff2d4a;
}

.ware-item {
  padding: 20rpx;
  padding-bottom: 0;
  display: flex;
  align-items: center;

  .choice-button {
    flex-shrink: 0;
    text-align: center;
    margin-right: 20rpx;
    font-size: 32rpx;
  }
}

.ware-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ware-content {
  display: flex;
  flex: 1;
  justify-content: space-between;
  border-bottom: 1px #eee solid;
  padding-bottom: 20rpx;
}

.ware-image {
  img {
    display: block;
    width: 200rpx;
    height: 200rpx;
  }
}

.ware-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ware-info-btm {
  display: flex;
  justify-content: space-between;

  .ware-price {
    color: red;
  }
}

.calculate {
  display: flex;
}

.rect {
  width: 20px;
  text-align: center;
  border: 1px #999 solid;
  line-height: 1.2;
}

.number {
  margin: 0 10px;
}

.cart-total {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;

  .total-button {
    padding-left: 20px;
    icon {
      margin-right: 10px;
    }
  }

  .total-center {
    flex: 1;
    padding: 20rpx;

    .colorRed {
      color: red;
    }

    .price-tips {
      font-size: 14px;
      color: #666;
    }
  }

  .accounts {
    width: 30%;
    height: 100rpx;
    background: red;
    color: #fff;
    line-height: 100rpx;
    text-align: center;
  }
}
</style>

